<template>
	<view>
		<view class="newstab-header">
			<view class="newstab-header-item" :class="{'newstab-header-item-active':trfnum == 0}"  @tap="transform(0)">
				简介
			</view>
			<view class="newstab-header-item" :class="{'newstab-header-item-active':trfnum == 1}"  @tap="transform(1)">
				目录
			</view>
			<view class="newstab-header-item" :class="{'newstab-header-item-active':trfnum == 2}"  @tap="transform(2)">
				评价
			</view>
		</view>
		<view class="newstab-content-intro" :class="{distrue:trfnum == 0}">
			<view class="intro-title">{{list.title}}</view>
			<view class="intro-score">
				<view class="intro-score-left-wrap">
					<view class="intro-score-left"></view>
				</view>
				<view class="intro-score-number">{{list.score}}</view>
				<view class="intro-score-people">{{list.person}}人在学</view>
			</view>
			<view class="intro-price">
				<view class="intro-price-top">
					<view class="intro-price-top-left">￥{{list.price}}</view>
					<view class="intro-price-top-right">特价仅剩9天</view>
				</view>
				<view class="intro-price-bottom">{{list.priceog}}</view>
			</view>
			<view class="intro-price intro-priceth">
				<view class="intro-active">活动</view>
				<view class="intro-active-r">领取500元好好学习购课礼包</view>
				<view class="iconfont icon-uniE98D users-icon-account"></view>
			</view>
			<view class="course-intro">
				<view class="course-intro-content">
					<view class="course-intro-title">课程介绍</view>
					<view class="course-intro-c">
						高效讲解相关知识，降低您的学习成本，终身学习终生受益。选择好的平台，选择喜欢的课程和老师进行学习。
					</view>
				</view>
			</view>
		</view>
		<view class="newstab-content-intro" :class="{distrue:trfnum == 1}">
			<view class="newstab-content-catalogue">
				课程已更完（含视频、音频版课件，内容相同）
			</view>
		</view>
		<view class="newstab-content-intro" :class="{distrue:trfnum == 2}">
			<view class="newstab-content-catalogue">
				全部评价（共{{list.person}}条评价）
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'NewsTab',
		props: {
			list: { Array }
		},
		data() {
			return {
				trfnum: 0,
			}
		},
		methods: {
			transform(e) {
				this.trfnum = e 
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '@/static/css/varibles.styl'
	@import '@/static/css/iconfont.css'
	.newstab-content-intro
		display:none
	.distrue 
		display:block
	.newstab-header 
		height:70rpx
		width:100%
		display:flex
		border-bottom:1px solid #ddd
		.newstab-header-item
			font-size:30rpx
			line-height:60rpx
			padding:0 30rpx
			margin:0 65rpx
		.newstab-header-item-active
			color:$bgColor
			border-bottom:2px solid $bgColor
	.intro-title
		font-size:34rpx
		padding:30rpx
	.intro-score
		height:60rpx
		margin:0rpx 30rpx
		border-bottom:1px solid #eee
		.intro-score-left-wrap
			float:left
			width:156rpx
			background:url('@/static/images/fenshuq.png') no-repeat
			background-size:cover
			.intro-score-left
				width:90%
				height:24rpx
				background:url('@/static/images/fenshuh.png') no-repeat
				background-size:cover
		.intro-score-number
			float:left
			font-size:20rpx
			margin-left:10rpx
		.intro-score-people
			float:left
			font-size:20rpx
			margin-left:20rpx
	.intro-price
		padding:30rpx 0 30rpx 0
		width:auto 
		margin:0 30rpx
		border-bottom:1px solid #ddd
		.intro-price-top 
			width:100%
			overflow:hidden
			.intro-price-top-left 
				font-size:35rpx
				float:left
			.intro-price-top-right 
				float:left
				font-size:20rpx
				border:1px solid red
				color:red
				margin-top:8rpx
				margin-left:20rpx
				line-height:20rpx
				padding:4rpx
		.intro-price-bottom 
			text-decoration:line-through
			color:#aaa
			font-size:30rpx
	.intro-priceth
		overflow:hidden
		border-bottom:0px
	.intro-active
		color:red
		font-size:20rpx
		border:1px solid red
		float:left
		margin-top:8rpx
		margin-left:0rpx
		line-height:20rpx
		padding:4rpx
	.intro-active-r
		float:left
		font-size:30rpx
		color:red
		margin-left:20rpx
		line-height:45rpx
	.users-icon-account
		float:right
		line-height:50rpx
		font-size:26rpx
	.course-intro
		border-top:30rpx solid #f6f6f6
		padding-bottom:150rpx
		.course-intro-content
			padding:0 30rpx
			.course-intro-title 
				font-size:32rpx
				font-weight:bold
				padding:30rpx 0rpx 20rpx 0
			.course-intro-c
				font-size:30rpx
				color:#999
	.newstab-content-intro
		.newstab-content-catalogue
			padding:0 30rpx
			background:#f6f6f6
			font-size:30rpx
			height:80rpx
			line-height:80rpx
</style>
